<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的</title>
  <link rel="stylesheet" href="./css/mine.css">
</head>

<body>
  <div class="jacket">
    <!-- 登录/个人信息 -->
    <header>
      <div class="avatar">
        <a href="./login.html">
          <div class="picture" id="avatar"><img src="./img/iconuser.png" alt="头像"></div>
        </a>
        <a href="./login.html">
          <div class="txt" id="name">登录/注册</div>
        </a>


      </div>
    </header>
    <!-- 功能 -->
    <main>
      <!-- 我的订单 -->
      <div class="order">
        <div class="order-txt">我的订单 <span><a href="./miCar.html">全部订单 ⟩</a></span></div>

        <div class="order-information">
          <div class="icon"><img src="./img/101.png" alt="">
          </div>
          <div class="icon"><img src="./img/102.png" alt=""></div>
          <div class="icon"><img src="./img/103.png" alt=""></div>
        </div>
      </div>
      <!-- 会员中心和我的优惠 -->
      <div class="function-module">
        <a href="#" class="min-box line">
          <div class="min-box-img"><img src="./img/5201.png" alt=""></div>
          <div class="min-box-txt">会员中心</div>
          <div class="min-box-icon"> ⟩</div>
        </a><a href="#" class="min-box">
          <div class="min-box-img"><img src="./img/5202 (1).png" alt=""></div>
          <div class="min-box-txt">我的优惠</div>
          <div class="min-box-icon"> ⟩</div>
        </a>
      </div>

      <!-- 服务中心和小米之家 -->
      <div class="function-module">
        <a href="#" class="min-box line">
          <div class="min-box-img"><img src="./img/5202 (2).png" alt=""></div>
          <div class="min-box-txt">服务中心</div>
          <div class="min-box-icon"> ⟩</div>
        </a><a href="#" class="min-box">
          <div class="min-box-img"><img src="./img/5202 (3).png" alt=""></div>
          <div class="min-box-txt">小米之家</div>
          <div class="min-box-icon"> ⟩</div>
        </a>
      </div>
      <!-- 我的F码 -->
      <!-- 礼物码兑换 -->
      <div class="function-module">
        <a href="#" class="min-box line">
          <div class="min-box-img"><img src="./img/5202 (4).png" alt=""></div>
          <div class="min-box-txt">我的F码</div>
          <div class="min-box-icon"> ⟩</div>
        </a><a href="#" class="min-box">
          <div class="min-box-img"><img src="./img/5202 (5).png" alt=""></div>
          <div class="min-box-txt">礼物码兑换</div>
          <div class="min-box-icon"> ⟩</div>
        </a>
      </div>

      <!-- 设置 -->
      <div class="function-module">
        <a href="miSet.html" class="min-box">
          <div class="min-box-img"><img src="./img/5202 (6).png" alt=""></div>
          <div class="min-box-txt">设置</div>
          <div class="min-box-icon"> ⟩</div>
        </a>
      </div>
    </main>
    <footer>
      <!-- 导航栏 -->
      <nav>
        <a href="./homepage1.html">
          <div class="box">
            <div class="icon"><img src="./img/iconhome.png" alt=""></div>
            <p>首页</p>
          </div>
        </a>
        <a href="./classification.html">
          <div class="box">
            <div class="icon"><img src="./img/iconcart.png" alt=""></div>
            <p>分类</p>
          </div>
        </a>
        <a href="miQ.html">
          <div class="box">
            <div class="icon"><img src="./img/iconstar.png" alt=""></div>
            <p>米圈</p>
          </div>
        </a>
        <a href="./miCar.html">
          <div class="box">
            <div class="icon"><img src="./img/iconcart.png" alt=""></div>
            <p>购物车</p>
          </div>
        </a>
        <a href="#">
          <div class="box">
            <div class="icon"><img src="./img/iconuserselected.png" alt=""></div>
            <p>我的</p>
          </div>
        </a>

      </nav>
    </footer>
  </div>
  <script>
    //1.
    // sessionStorage.setItem('myUsername', data.username);
    let name = document.querySelector('#name')
    let avatar = document.querySelector('#avatar')

    // console.log(name);

    const tokenValue = sessionStorage.getItem('myToken')
    const tokenUsername = sessionStorage.getItem('myUsername')
    const tokenAvatar = sessionStorage.getItem('myAvatar')

    // console.log(tokenValue);
    // console.log(tokenUsername);
    if (tokenValue != null) {
      console.log('登录成功');
      name.innerHTML = tokenUsername
      avatar.innerHTML = `<img src="${tokenAvatar}" alt="头像">`
      // sessionStorage.setItem('myAvatar', data.avatar);
    } else {
      console.log('登录失败');
    }


  </script>
</body>

</html>